<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2021-12-27 13:52:25
 * 天凉好个秋
-->
<template>
    <ul class="menuBox trans">
        <li
            class="menuItem trans"
            :class="{ 'active': item.path === route.fullPath }"
            v-for="item in baseMenu"
            :key="item.id"
            @click="menuClick(item)"
        >
            {{ item.name }}
            <span class="activeBar trans" v-show="item.path === route.fullPath"></span>
        </li>
    </ul>
    <router-view v-slot="{ Component }" class="content">
        <keep-alive>
            <component :is="Component" />
        </keep-alive>
    </router-view>
</template>

<script lang='ts' setup>
import { reactive, computed } from 'vue'
import type { IBaseMenu } from './types'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from '@/hooks/locales/useI18N'

const route = useRoute()
const router = useRouter()
const { t } = useI18n()

const baseMenu: Array<IBaseMenu> = reactive(
    [
        {
            id: 1,
            name: t("foundMusic.menu.recommend"),
            path: '/foundMusic/foundMusic/recommend'
        },
        {
            id: 2,
            name: t("foundMusic.menu.customized"),
            path: '/foundMusic/foundMusic/customized'
        },
        {
            id: 3,
            name: t("foundMusic.menu.songList"),
            path: '/foundMusic/foundMusic/songList'
        },
        {
            id: 4,
            name: t("foundMusic.menu.rankList"),
            path: '/foundMusic/foundMusic/rankList'
        },
        {
            id: 5,
            name: t("foundMusic.menu.singer"),
            path: '/foundMusic/foundMusic/singer'
        },
        {
            id: 6,
            name: t("foundMusic.menu.newMusic"),
            path: '/foundMusic/foundMusic/newMusic'
        }
    ]
)
// 菜单点击
const menuClick = (menu: IBaseMenu) => {
    const { id, path } = menu
    router.push(path)
}
</script>

<style scoped lang='scss'>
.menuBox {
    @apply fixed flex w-full items-center pl-3 select-none z-20;
    height: 60px;
    margin: 0;
    background-color: $main-bg-color;
    .menuItem {
        @apply flex items-center relative pb-2 text-base ml-4 cursor-pointer;
        color: $main-text-color;
    }
    .active {
        @apply text-lg font-bold transition-all duration-150;
    }
    .activeBar {
        position: absolute;
        left: 10%;
        bottom: 0;
        height: 4px;
        width: 80%;
        border-radius: 2px;
        background: $theme-color;
    }
}
.content {
    margin-top: 60px;
    padding: 0 28px;
    height: calc(100% - 60px);
    // overflow-y: scroll;
}
</style>